<template>
    <div class="test">
       <!-- <Carousel></Carousel> -->
       <!-- <Music></Music> -->
       <PlayerBar></PlayerBar>
       <!-- <div class="" id="test-box">
           <li>001</li>
           <li>002</li>
           <li>003</li>
       </div>
       <button style="width:100px;color:white;height:50px;" @click="test">test</button>
       <button style="width:100px;color:white;height:50px;" @click="print">print</button> -->
    </div>
</template>

<script>
import PlayerBar from '@/components/PlayerBar';
import Music from '@/components/Music';

export default {
    name: "test",
    created() {
    },
    data() {
        return {
            audio_id : 1296706520,
            audio_src : 'https://music.163.com/song/media/outer/url?id=1296706520.mp3',
            my_audio: null
        }
    },
    computed: {
        timeline () {
            let au = document.getElementById("auauau");
            return au.currentTime; 
        }
    },
    components: {
        PlayerBar,
        Music
    },
    methods:{
        test(){
            var tb = document.getElementById("test-box");
            // console.log(tb);
            var lii = tb.getElementsByTagName('li')[0];
            // console.log(lii);
            var ttt = lii.cloneNode(true);
            // console.log(ttt);

            var au = new Audio();
            console.log(au);
            tb.appendChild(au);
            au.setAttribute('controls','true');
            au.setAttribute('id','auauau');
            au.setAttribute('src','https://music.163.com/song/media/outer/url?id=1296706520.mp3');
            setTimeout(() => {
                console.log(au.currentTime);
            }, 2000);
        },
        print(){
            console.log(this.timeline);
        }
    }

}
</script>

<style lang="scss" scoped>
    .test{
        margin-top: 48px;
    }

</style>
